const {resolve, join} = require('path')
const glob = require('glob')
const htmlWebpackPlugin = require('html-webpack-plugin')
const miniCssExtractPlugin = require('mini-css-extract-plugin')
const optimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
const purgecssWebpackPlugin = require('purgecss-webpack-plugin')
const PATHS = {src: join(__dirname, 'src')}
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    // 1. entry 入口文件，指定webpack以哪个文件为起点开始打包
    // String 单入口：如果只有一个入口使用字符串，打包一个chunk，输出一个bundle，chunk是默认的
    entry: {
        index: './src/js/index.js',
        detail: './src/js/detail.js'
    },    // 默认值为 ./src/index.js

    // Array 多入口：会打包成一个文件，所有入口文件形成一个chunk，输出只有一个bundle
    // entry: ['./src/a.js', './src/b.js'],    // 默认值为 ./src/index.js

    // Object 多入口：所有入口文件形成几个chunk，并输出只有几个bundle，名称是kye
    // 当 entry 是对象的时候  output 里面的 filename: '[name].js',
    // entry: {
    //     one: './src/a.js',
    //     two: './src/b.js'
    // },

    // 特殊用法
    // entry: {
    //     one: ['./src/a1.js', './src/a2.js'],
    //     two: ['./src/b1.js', './src/b2.js']
    // },

    // 2. output 入口文件，指定webpack打包后的资源
    output: {
        filename: 'js/[name][hash:10].js',
        path: resolve(__dirname, 'dist')
    },

    // 3. looder 能够去处理那些我们 JavaScript 资源 css, img 等，将它们处理成 webpack 能识别的资源，可以理解成一个翻译过程 （webpack 自身只能理解 js 和 json）
    module: {
        rules: [
            // { test: /\.css$/, use: ['style-loader', 'css-loader']  /*从右到左*/ },
            // { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']},
            // { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader']}
            {
                test: /\.css$/, use: [
                    {
                        loader: miniCssExtractPlugin.loader,
                        options: {publicPath: '../'}
                    }, 'css-loader', 'postcss-loader']  /*从右到左*/
            },
            {
                test: /\.less$/, use: [
                    {
                        loader: miniCssExtractPlugin.loader,
                        options: {publicPath: '../'}
                    }, 'css-loader', 'less-loader', 'postcss-loader']
            },
            {
                test: /\.scss$/, use: [
                    {
                        loader: miniCssExtractPlugin.loader,
                        options: {publicPath: '../'}
                    }, 'css-loader', 'sass-loader', 'postcss-loader']
            },

            // { test: /\.(png|jpg|jpeg|gif)$/, use: ['url-loader', {loader: 'file-loader', options: {}}]}
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                loader: 'url-loader',
                options: {
                    // publicPath: 'images/',
                    // outputPath: './images/',
                    limit: 10,
                    name: 'images/[name][hash:10].[ext]',  // 图片名字默认为哈希 [hash].[ext]
                    esModule: false
                }
            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            }
        ]
    },

    // 4. plugins 插件（plugins）可用于范围更广的任务。插件的范围包括，从打包优化和压缩直到新定义环境中的变量等。
    plugins: [
        // 清除dist
        new CleanWebpackPlugin(),
        // 默认创建一空的，目的自动引入打包的资源（js/css）new htmlWebpackPlugin()
        // 编译html
        new htmlWebpackPlugin({
            template: "./src/index.html",  // 入口文件
            filename: "index.html",  // 编译后的文件名
            chunks: ["index"],  // 指定引入的文件
            minify: {
                // 移除空格
                collapseWhitespace: false,
                // 移除注释
                removeComments: true
            }
        }),
        new htmlWebpackPlugin({
            template: "./src/detail.html",  // 入口文件
            filename: "detail.html",  // 编译后的文件名
            chunks: ["detail"],  // 指定引入的文件
            minify: {
                // 移除空格
                collapseWhitespace: false,
                // 移除注释
                removeComments: true
            }
        }),

        // 编译css为文件引入
        new miniCssExtractPlugin({
            filename: "css/[name][hash:10].css",  // 编译后的文件名
        }),

        // 去除没有用到的css
        new purgecssWebpackPlugin({
            paths: glob.sync(PATHS.src + '/**/*', {nodir: true})
        })

        // 压缩css文件
        // new optimizeCssAssetsWebpackPlugin()
    ],

    // 在webpack5需要配置这个才能热跟新
    target: 'web',
    devServer: {
        port: 8080, // 默认端口
        open: true,
        // hot: true    // 这个是指定部分热更新
    }

    // 5. mode 指定webpack使用相应模式的配置
    //      开发模式 development 配置比较简单，能让代码本地调试运行的环境。
    //      生产模式 production 代码需要不断优化达到性能最好。能让代码优化上线运行的环境
    //      都会自动启用一些插件，生产模式使用插件跟多
    // mode: 'production'
}